<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="20" type="flex">
        <el-col :span="10">
          <div class="consult_tab">
            <NewCard :title="$route.meta.title" :isright="isright">
              <template slot="right">
                <div class="topRight">
                  <el-input v-model="topSearchValue" placeholder="请输入咨询名称" class="topSearch" @input="changeValue" @focus="focusInput" @blur="blurInput" ref="topSearch">
                    <i slot="suffix">
                      <svg-icon icon-class="ss_icon" />
                    </i>
                  </el-input>
                  <div class="topSearchFind" v-show="searchFindShow">
                    <ul>
                      <!-- 一级 -->
                      <li v-for="(list,index) in allList" :key="list.id" @mousedown.prevent="clickSearchList(list,index)">
                        {{list.name}}
                      </li>
                    </ul>
                  </div>
                </div>
              </template>
              <div class="tabOne">
                <div
                  class="tablist"
                  v-for="(f1, index) in list"
                  :key="f1.id"
                  :class="firstId == index + 1 ? 'isActive' : ''"
                  @click="clickFirst(f1, index)"
                >
                  <img :src="f1.icon1" class="imgnor" />
                  <img :src="f1.icon2" class="imgsel" />
                  <el-button round>{{ f1.name }}</el-button>
                </div>
              </div>

              <div class="tabTwo">
                <p class="tabTitle">二级类别</p>
                <ul>
                  <li
                    v-for="s in secondary"
                    :key="s.id"
                    :class="[s.id == secondaryId ? 'isSecon' : '']"
                    @click="clickSecon(s)"
                  >
                    <img :src="s.icon1" alt="" />
                    <p>{{ s.name }}</p>
                  </li>
                </ul>
              </div>
              
              <div class="tabThree" v-if="threeList.length">
                <p class="tabTitle">三级类别</p>
                <ul>
                  <li v-for=" t in threeList" :key="t.id" @click="clickThree(t)"
                  :class="[t.id== threeId ? 'isthree' : '']">
                    <img :src="t.icon1" alt="" />
                    <div class="threeTxt">
                      <p>{{ t.name }}</p>
                      <span>{{ t.describable }}</span>
                    </div>
                  </li>
                </ul>
              </div>

              <!-- gif图片展示 -->
              <!-- <div class="slogan" v-else>
                <div class="gif">
                  <img src="https://wensanshi.oss-cn-shenzhen.aliyuncs.com/images/static/20220909-115231.gif" alt="">
                </div>
                <div class="text">
                  <div class="cn">
                    有问必有师
                  </div>
                  <div class="en">
                    Questions and Answers
                  </div>
                </div>
              </div> -->
              <!-- gif图片展示 end-->

            </NewCard>
          </div>
        </el-col>
        <el-col :span="14">
          <FeaturedContent v-if="demandShow == 0"></FeaturedContent>

          <div class="demand" v-if="demandShow == 1">
            <NewCard :title="`${$route.meta.title}-${secondaryName}-${threeName}`" :isright="isright">
              <template slot="right">
                <svg-icon icon-class="fx_icon" class="shareBtn" @click="isShowCard=true"/>
                <ShareBox :thisContentUrl="thisContentUrl" :isShowCard.sync="isShowCard"></ShareBox>
              </template>

              <div class="problem">
                <h3>
                  <i>*</i> 请详细描述您的问题与需求
                  <span>(问题已加密，请放心提问)</span>
                </h3>
                <el-input
                  type="textarea"
                  :rows="10"
                  resize="none"
                  placeholder="请描述问题并提问…"
                  v-model="formdata.question"
                >
                </el-input>
              </div>
              <div class="accessory">
                <h3>上传附件 （{{ getLength }}/{{this.ruleForm.c_file_num}}）</h3>
                <el-upload
                  class="upload-demo"
                  action=""
                  :auto-upload="false"
                  :on-change="submitFile"
                   :before-remove="beforeRemove"
                  :limit="limit"
                  :on-exceed="handleExceed"
                  :file-list="formdata.fileList"
                  accept=".doc, .docx, .pdf, .jpg,.png"
                >
                  <div class="uploadBtn">
                    <el-button size="small" round>点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">
                      支持PDF、DOC、DOCX、JPG、PNG格式，单个附件大小不超过10M，最多上传{{this.ruleForm.c_file_num}}个附件
                    </div>
                  </div>
                </el-upload>
              </div>
              <div class="submitBtn">
                <el-button round @click="submitbtn">选择咨询方式</el-button>
              </div>
            </NewCard>
            <!-- <Demand
              :firstName='firstName'
              :secondaryName='secondaryName'
              :threeName='threeName'
              :demandShow="demandShow"
            ></Demand> -->
          </div>

          <Consultation
            v-show="demandShow == 2"
            @demandShow="demandShowfn"
          ></Consultation>
          <div
            class="consultPay"
            v-show="demandShow != 2 && demandShow != 1 && demandShow != 0">
            <Pay></Pay>
          </div>
          <!-- <div class="consultPay"> -->
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import Demand from "./demand.vue";
import Pay from "./Pay.vue";
import Consultation from "./consultation.vue";
import FeaturedContent from "@/components/FeaturedContent/index.vue";

// 分享的组件
import ShareBox from "@/components/shareBox/index.vue"

import NewCard from "@/wss/components/newCard.vue";
import {
  getConsultTypeListApi,
  getFindConsultTypeListApi,
  addConsultTypeListApi,
} from "@/BMViews/api/work/consult.js";
import {
  getConfigListConsultApi,
} from "@/wss/newApi_3-24/base/config.js";
export default {
  name: "Finance",
  components: { NewCard, Demand, Pay, Consultation, FeaturedContent,ShareBox },
  data() {
    return {
      //分页参数
      pageing: { pageNum: 1, pageSize: 100 },
      isShowCard: false,//分享按钮的显示隐藏
      thisContentUrl: '',//分享的链接

      list: [], //所有类别的数据
      firstList: [], //一级类别的列表
      firstId: "", //当前选中的一级Id
      firstName: "", //当前选中的一级名称

      secondary: [], //二级类别的列表
      secondaryId: "", //当前选中的二级类型id
      secondaryName: "", //当前选中的二级名称

      threeList: [], //三级类别的列表
      threeId: "", //当前选中的三级类型id
      threeName: "", //当前选中的三级名称

      demandShow: 1, 
      limit:0, //上传附件最多数量
      ruleForm: {
        c_file_size: "", //附件数量
        c_file_num: "", //附件大小
      },
      //提交信息集合
      getLength: 0,
      formdata: {
        question: "",
        fileList: [],
        typeId: "",
        type: "",
        firstName: "",
        secondaryName: "",
        threeName: "",
      },

       isright:true,//显示搜索框
      allList:[],// 用于过滤的全部类型数据
      filterList:[],// 过滤出来的数据
      topSearchValue:'',//搜索框输入的值
      searchFindShow:false,//搜索发现显示隐藏
    };
  },

  async mounted() {
    this.firstId = this.$route.meta.id;
    await this.gerConsultTypeList(); //加载所有类别
    await this.getRangeConfigListConsultFn();//咨询设置参数
    this.selectDefault(); //默认选中的一级
    this.$bus.$on("EventPaymentCompletion",()=>{
      //我的已购
      this.$router.push('/Bm-personalCenter/homepage')
    })

    // 路由传参 点击轮播图
    if(this.$route.query.typeId){
      let typeId = this.$route.query.typeId
      let arr = typeId.split(',') //二级类型id和三级类型id
      // 过滤出当前二级类型id下的三级类型列表
      let second = this.secondary.find(item=>{
        return item.id == arr[0]
      })
      this.secondaryId = second.id //二级类型id
      this.secondaryName = second.name //二级类型名称
      
      this.threeList = second.children //当前的三级类型列表
      this.threeId = arr[1] //三级类型的id
      this.threeName = this.threeList.find(k=>{
        return k.id == arr[1]
      }).name
    }
    // 路由传参 点击轮播图end

    // 点击返回按钮的bus
    this.$bus.$on("returnBtnShow",(num)=>{
      this.demandShow = num
    })

    this.getShareLink()// 获取当前项目的分享链接
  },
  methods: {
    // 获取当前项目的分享链接
    getShareLink(){
      let href = window.location.host //获取当前域名 不带http://
      let route = this.$route.fullPath
      let twoId = this.secondaryId
      let threeId = this.threeId
      this.thisContentUrl = `http://${href}${route}?typeId=${twoId},${threeId}`
    },

    selectDefault() {
      if (this.$route.query.queryData==2 || this.$route.meta.mid==2) {
        this.firstId = this.$route.query.queryData||this.$route.meta.mid;
        this.secondary = this.list[1].children;
        this.secondaryId = this.secondary[this.secondary.length - 1].id;
      } else {
        //默认选中一级类别 根据路由传的一级类型id找到对应二级类型
        let seconObj = this.list.find(item=>{
          return item.id == this.$route.meta.id
        })
        this.secondary = seconObj.children;
        if(this.secondary){
          this.secondaryId = this.secondary[0]?.id;
        }
        // 过滤出二级类别
      }
      // 过滤出三级类别
      if(this.secondary){
        this.threeList = this.secondary.filter(
          (item) => item.id == this.secondaryId
        )[0].children;
        this.secondaryName = this.secondary&&this.secondary[0]?.name;
        this.threeName = this.threeList&&this.threeList[0]?.name;
      }
      
      // 默认选中三级类型第一项
      if(this.threeList){
        this.formdata.type = this.threeList[0]?.name;
        this.formdata.typeId = this.threeList[0]?.id;
        this.threeId = this.threeList[0]?.id;
        this.threeName = this.threeList[0]?.name;

        // 清空三级，为了显示gif图
        // this.threeList = []
      }

      this.getShareLink()// 获取当前项目的分享链接
    },
     //输入框改变的时候过滤
    changeValue(){
      //过滤数据 this.topSearchValue
      this.allList = this.filterList.filter(item=>item.name.includes(this.topSearchValue))
    },
    //点击搜索发现的某一条
    clickSearchList(list,index){
      if(list.type == "1"){
        let nowId = this.$route.path.split('/')[2]
        if(list.id != nowId){
          this.$router.push({path:`/Bm-Consult/${list.id}`})
        }
      }else if(list.type == "2"){
           // 如果当前选中的二级类型不在当前页面，那就跳转到对应的页面，拼接typeId=二级类型id和三级类型id
        let indexType = this.secondary.findIndex((item) => item.id == list.id);
        if(indexType == -1){
          // 等于-1就说明在别的页面要跳转
          let twoid = list.id
          let threeId = list.children[0].id
          let typeId = `${twoid},${threeId}`
          this.$router.push({
            path:`/Bm-Consult/${list.pid}`,
            query: {typeId}
          })
        }else{
          // 不等于-1就说明在当前页面
          this.clickSecon(list,index)
        }
      }else{
         // 把当前二级类型的三级合并起来
        let threeList = []
        this.secondary.forEach(item=>{
          if(item.children){
            item.children.forEach(k=>{
              threeList.push(k)
            })
          }
        })
        // 如果当前选中的三级类型不在当前页面，那就跳转到对应的页面，拼接typeId=二级类型id和三级类型id
        let indexType = threeList.findIndex((item) => item.id == list.id);
        if(indexType == -1){
          // 获取当前这一条三级类型的父二级类型
          let twoObj = this.filterList.find(item=>{
            return item.id == list.pid
          })
          let oneId = twoObj.pid
          let typeId = `${twoObj.id},${list.id}`
          this.$router.push({
            path:`/Bm-Consult/${oneId}`,
            query: {typeId}
          })
        }else{
          this.clickThree(list)
        }
      }
    },
    //获取咨询类型列表
    async gerConsultTypeList() {
      const { pageNum, pageSize } = this.pageing;
      //路由参数（默认选中哪一项）
      let defaultId = this.$route;
      let result = await getFindConsultTypeListApi({ pageNum, pageSize });
      if (result.code == 200) {
        this.list = result.rows;
        this.firstName = result.rows[0].name;

        this.formdata = {};

        let seconObj = this.list.find(item=>{
          return item.id == this.$route.meta.id
        })
        this.secondary =seconObj&& seconObj.children;
         // 用于过滤-----------------------
        // 获取全部一级类型
        let oneType = []
        this.list.forEach(item=>{
          oneType.push(item)
        })
        // 获取全部二级类型
        let secondType = []
        this.list.forEach(item=>{
          if(item.children){
            item.children.forEach(k=>{
              secondType.push(k)

            })
          }
        })
        let threeType = [] //全部三级类型
        secondType.forEach(item=>{
          if(item.children){
            item.children.forEach(i => {
              threeType.push(i)
            });
          }
        })
        this.allList = [...oneType,...secondType,...threeType]
        this.filterList = this.allList
      }
    },
     //获取设置列表
    async getRangeConfigListConsultFn() {
      let { code, data } = await getConfigListConsultApi({ type: "c_file_num"});
      if (code==200) {
        let filelist=JSON.parse(JSON.stringify(data))
        this.limit=Number(filelist[0].value)
        this.ruleForm.c_file_num=filelist[0].value
      }
    }, 
    //点击一级类别
    clickFirst(f1, index) {
      //清空选中默认值
      this.secondaryId='' ; 
      this.threeId='';
      this.firstId = index + 1;
      console.log(this.firstId);
      this.firstName = f1.name;
      //过滤出二级类别
      this.secondary = this.list.filter((item) => item.id == f1.id)[0].children;
      //置空三级类别
      this.threeList = [];
      this.secondaryName = "";
      this.threeName = "";

      this.getShareLink()// 获取当前项目的分享链接
    },

    //点击二级类别
    clickSecon(s) {
      //清空选中默认值
      this.secondaryId='' ; 
      this.threeId='';
      this.secondaryId = s.id;
      this.secondaryName = s.name;
      //过滤出三级类别
      this.threeList = this.secondary.filter(
        (item) => item.id == s.id
      )[0].children;
      this.threeName = "";

      // 默认选中三级类型第一项
      this.formdata.type = this.threeList[0].name;
      this.formdata.typeId = this.threeList[0].id;
      this.threeId = this.threeList[0].id;
      this.threeName = this.threeList[0].name;

      this.getShareLink()// 获取当前项目的分享链接
    },
    //点击三级类别
    clickThree(t,index) {
        //清空上一个咨询的数据
      this.formdata=[]
       this.getLength=0
      //隐藏搜索发现
      this.$refs.topSearch.blur();
      this.searchFindShow=false
       // 过滤出当前三级类别的二级类别
      let nowSecond = this.secondary.find(item=>{
        return item.id == t.pid
      })
      this.secondaryId = nowSecond.id  //二级类型id
      this.secondaryName = nowSecond.name //二级类型名字
      this.threeList = nowSecond.children //三级类型列表

    
      this.demandShow = 1;
      this.formdata.type = t.name;
      this.formdata.typeId = t.id;
      this.threeId = t.id;
      this.threeName = t.name;

      this.getShareLink()// 获取当前项目的分享链接
    },
    //搜索框激活状态
    focusInput(){
      //显示搜索发现
      this.searchFindShow=true
    },
    //搜索框失去焦点
    blurInput(){
      //隐藏搜索发现
      this.searchFindShow=false
    },

    //上傳文件處理
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        const filePost = file.name.substring(file.name.lastIndexOf(".") + 1);
        // console.log(filePost, "filePost");
        if (filePost === "pdf" || filePost === "docx" ||filePost=="jpg"||filePost=="png" ) {
          if (file.size > 10 * 1024 * 1024) {
            // eslint-disable-next-line prefer-promise-reject-errors
            this.$message.warning("上传大小不能超过10M!");
            this.fileList = [];
            return false;
          }
        } else {
          if (file.size > this.sizeLimit * 1024 * 1024) {
            // eslint-disable-next-line prefer-promise-reject-errors
            this.$message.warning(`上传附件大小不能超过${this.sizeLimit}M!`);
            this.fileList = [];
            return false;
          }
        }
        resolve();
      });
    },
    async submitFile(file, fileList) {
      // console.log(fileList);
      // 获取上传的文件
      await this.beforeUpload(file);
    
      this.formdata.fileList = fileList;
      this.getLength = fileList.length;
    },
     beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`).then(()=>{
        this.getLength = fileList.length-1;
        });
      },
    handleExceed(files, fileList) {
      this.$message.warning(`仅可上传${this.limit}个附件`);
    },
    //接受pay主键传递过来的值
    demandShowfn(e) {
      this.demandShow = e;
    },
    //提交信息
    submitbtn() {
      if (this.firstId !="" && this.secondaryId != "" && this.threeId != "") {
        if (!this.formdata.question == "") {
          this.formdata.firstName = this.$route.meta.title;
          this.formdata.secondaryName = this.secondaryName;
          this.formdata.threeName = this.threeName;
          this.$bus.$emit("father", this.formdata);
        
          this.demandShow = 2;
        } else {
          this.$message({
            message: "请填咨询信息",
            type: "warning",
          });
        }
      } else {
        this.$message({
          message: "请选择咨询的类型",
          type: "warning",
        });
      }
    },
  },
};
</script>

<style scoped>
/* 顶部右边搜索 */
.topRight{
  position: relative;
}
.topSearch{
  width: 220px;
}
::v-deep .topSearch .el-input__suffix{
  right: 15px;
}
.topSearch i{
  display: inline-block;
  font-size: 16px;
  margin-top: 7px;
}
::v-deep .topSearch .el-input__inner{
  height: 36px;
  line-height: 36px;
  border-radius: 18px;
}
::v-deep .topSearch .el-input__inner:focus{
  border: 2px solid #F87A23;
  border-radius: 18px 18px 0 0;
  border-bottom: 1px solid #EFEFEF;
}
.topSearchFind{
  position: absolute;
  width: 100%;
  border: 2px solid #F87A23;
  border-top: 0;
  background-color: #fff;
  border-radius: 0 0 18px 18px;
  padding: 10px 0;
  z-index: 999;
  overflow: hidden;
}
.topSearchFind ul{
  max-height: 200px;
  overflow-y: auto;
}
.topSearchFind ul>li{
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  font-size: 14px;
  line-height: 34px;
  color: #333333;
  cursor: pointer;
  transition: all 0.3s;
}
.topSearchFind ul>li:hover{
  background-color: #F4F5F8;
  color: #F87A23;
}
.topSearchFind ul>li>span{
  font-size: 12px;
  color: #999;
}
/* 顶部右边搜索 end*/

/* 高度 */
::v-deep .label-box-content,
::v-deep .label-box-content .el-row,
::v-deep .label-box-content .el-col,
::v-deep .label-box-content .el-col > div,
::v-deep .label-box-content .el-card,
::v-deep .label-box-content .el-card__body {
  height: 100%;
}
::v-deep .el-card__body {
  position: relative;
}
::v-deep .el-card__body > div {
  height: calc(100% - 45px);
  overflow-y: auto;
}
::v-deep .label-box-content .el-card__body > div::-webkit-scrollbar {
  width: 0px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 子組件處理 */
/* 一级 */
.tabOne {
  display: flex;
  justify-content: space-evenly;
  border: 1px solid #e5e6e9;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 26px 0;
  margin-top: 15px;
  display: none;
}
.tabOne .tablist {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.tabOne .tablist img {
  width: 36px;
}
.tabOne .tablist img.imgsel {
  display: none;
}
.tabOne .tablist.isActive img.imgsel {
  display: block;
}
.tabOne .tablist.isActive img.imgnor {
  display: none;
}

.tabOne .tablist button {
  color: #686975;
  font-size: 16px;
  background-color: transparent;
  border: 2px solid #c8cce2;
  padding: 6px 20px;
  margin-top: 18px;
}
.tabOne .tablist::before {
  content: "";
  display: none;
  position: absolute;
  bottom: -26px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #e5e6e9;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}
.tabOne .tablist::after {
  content: "";
  display: none;
  position: absolute;
  bottom: -27px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #fff;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}

.tabOne .tablist.isActive button,
.tabOne .tablist button:hover {
  color: #fff;
  background-color: #39486f;
  border-color: #39486f;
}
.tabOne .tablist.isActive::before {
  display: block;
}
.tabOne .tablist.isActive::after {
  display: block;
}

/* 二级 */
.tabTitle {
  font-size: 12px;
  color: #999;
  margin: 20px 0;
}
.tabTwo ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.tabTwo ul > li {
  width: 21%;
  margin-bottom: 20px;
  text-align: center;
  font-size: 14px;
  color: #333;
  border-bottom: 2px solid #fff;
  cursor: pointer;
}
.tabTwo ul > li > p {
  margin: 10px 0;
}
.tabTwo ul > li > img {
  display: block;
  width: 56px;
  height: 60px;
  margin: 0 auto;
}
.tabTwo ul > li.isSecon {
  color: #f87a23;
  border-bottom-color: #f87a23;
}
.tabTwo ul > li:hover {
  color: #f87a23;
}

/* 三级类型 */


.tabThree ul {
  width: 100%;
}
.tabThree ul > li {
  display: flex;
  padding: 15px;
  border: 1px solid #efefef;
  border-radius: 12px;
  margin-bottom: 12px;
  cursor: pointer;
}
.tabThree ul > li img {
  width: 18px;
  height: 18px;
  margin-right: 12px;
  margin-top: 2px;
}
.tabThree ul > li p {
  margin: 0;
  font-size: 16px;
}
.tabThree ul > li span {
  font-size: 12px;
  color: #999;
}
.tabThree ul > li:hover {
  background-color: #f4f5f8;
  border-color: #f4f5f8;
}
.tabThree ul > li.isthree {
 background-color: #f4f5f8;
  border-color: #f4f5f8;
  color: #f87a23;

}
.tabThree ul > li:hover p {
  color: #f87a23;
}
.problem h3 {
  font-size: 20px;
  margin: 15px 0;
}
.problem h3 > i {
  color: #f87a23;
}
.problem h3 > span {
  font-size: 12px;
  color: #f87a23;
}
::v-deep .problem textarea {
  font-family: "微软雅黑";
  border-radius: 12px;
}

/* 分享按钮 */
.demand >>> .top{
  position: relative;
}
.shareBtn{
  font-size: 16px;
  color: #999;
  cursor: pointer;
}

/* 附件 */
.accessory {
  margin-bottom: 80px;
}
.accessory h3 {
  margin: 15px 0;
}
.accessory .uploadBtn {
  display: flex;
  align-items: center;
}
.accessory .uploadBtn .el-button {
  margin-right: 15px;
  border: 2px solid #d7d7d7;
  font-size: 14px;
  padding: 9px 20px;
}
.accessory .uploadBtn .el-button:hover {
  color: #fff;
  background-color: #f87a23;
  border-color: #f87a23;
}
.accessory .el-upload__tip {
  margin-top: 0;
  color: #bababa;
}
::v-deep .accessory .el-upload-list__item {
  border-bottom: 1px solid #efefef;
  padding-bottom: 10px;
}
::v-deep .accessory .el-upload-list__item:hover {
  background-color: transparent;
}
::v-deep .accessory .el-upload-list__item-name:hover {
  color: #f87a23;
}

/* 提交按钮 */
.submitBtn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: right;
  border-top: 1px solid #ecedf0;
  background-color: #fff;
  padding: 10px 20px;
}
.submitBtn button {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
  font-size: 14px;
  padding: 10px 70px;
}
</style>
<style scoped>
/* 响应式 */
@media (max-width: 1120px) {
  .tabTwo ul > li{
    margin-bottom: 10px;
  }
  .tabTwo ul > li > p{
    margin: 8px 0;
  }
  .tabTwo ul > li > img{
    width: 42px;
    height: auto;
  }

  .tabThree ul > li{
    padding: 10px 15px;
  }
}
</style>

<style lang="scss" scoped>
// gif表情
.slogan{
	padding-top: 20px;
	padding-bottom: 100px;
	text-align: center;
	
	.gif{
		// padding-top:50rpx;
	}
	.gif img{
		width: 150px;
		margin: 0 auto;
	}
	.text{
		// padding-top:50rpx;
		text-transform:uppercase;
		.cn{
			font-size: 40px;
			color: rgb(246, 246, 247)
		}
		.en{
			font-size: 14px;
			color: rgb(246, 246, 247)
		}
	}
	.text img{
		width: 551px;
		height: 116px;
		margin: 0 atuo;
	}
}
</style>